<template>
  <view class="template-product tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
  <!--  <tn-nav-bar fixed customBack :bottomShadow="false" backgroundColor="#FFFFFF">
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
    -->
    <view class="tn-margin-top tn-margin-bottom">
     <image :src="courses.avatar.url" mode="widthFix" style="width: 100%;"></image>
     
    </view>
    
    
    <view class="tn-padding-bottom-xl">
      <view class="">
        <view class="tn-margin" >
          <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding website-shadow" @click="tn('/pages/chapter/chapter?id='+courses._id)">
            <view class="justify-content-item">
              <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                <view>
                  <view>
					  <image :src="courses.avatar.url" mode="widthFix" style="width: 110rpx;height: 110rpx"></image>
                  </view>
                </view>
                <view class="tn-padding-right tn-color-black">
                  <view class="tn-padding-right tn-padding-left-sm tn-text-lg tn-text-bold">
                    {{courses.title}}
                  </view>
                  <view class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm">
                    <text class="tn-color-brown tn-padding-left-xs tn-text-bold">{{courses.content}}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="justify-content-item tn-flex-row-center">
              <view class="tn-cool-bg-color-15 tn-padding-xs tn-color-white tn-round tn-shadow-blur">
                <text class="tn-padding-left-xs">Go</text>
                <text class="tn-icon-send-fill tn-padding-xs"></text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>  
    
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  const pageDataCenter=uniCloud.importObject('page-data-center')
  export default {
    name: 'TemplateProduct',
    mixins: [template_page_mixin],
    data(){
      return {
        cardCur: 0,
		courses:null,
        banner: 'https://resource.tuniaokj.com/images/swiper/ad1.jpg',
        current: 0
      }
    },
	onLoad(option) {
		this.getData(option.id)
	},
    methods: {
		getData(course_id){
			pageDataCenter.getCourseDetail(course_id).then((res)=>{
				console.log('getCourseList',res)
				this.courses=res.data
			})
		},
      // cardSwiper
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
      // tab选项卡切换
      tabChange(index) {
        this.current = index
      },
      getRandomCoolBg() {
        return this.$t.colorUtils.getRandomCoolBgClass()
      },
	  goBack(){
		  uni.navigateBack()
	  }
    }
  }
</script>

<style lang="scss" scoped>
	@import '../course/course.scss';
</style>
